<seed-content [ad]="false">
  <seed-toolbar-header [underline]="false">
    <seed-toolbar-title>{{cardBasicInfo?.name}}</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>
  <div class="ticket-service-detail"  *ngIf="cardBasicInfo">
    <div class="card-container"
         [ngStyle]="{background:'url('+cardBasicInfo?.cardImgUrl +') no-repeat center center/cover'}">
      <div class="card-switch seed-flexbox seed-flexbox-content-center" (click)="handleCardDisplay()">
        <seed-icon color="c10" name="icon-xiala2-01"></seed-icon>
      </div>
      <div class="small-card small-card-in seed-flexbox seed-flexbox-align-center seed-flexbox-content-between">
        <div class="left">
          <img [src]="dataStore.theme.img" alt="">
          <p>
            <em *ngIf="cardBasicInfo.count ||cardBasicInfo.count ===0">{{cardBasicInfo.count}}{{cardBasicInfo.goodsUnit}}</em>
            <span class="order-link seed-flexbox seed-flexbox-align-center"
                  [routerLink]="['/order/detail',cardBasicInfo?.orderNo ]">查看订单</span>
          </p>
        </div>
        <div class="right seed-flexbox seed-flexbox-align-center seed-flexbox-content-center">
          <span>{{cardStatusStore[cardBasicInfo?.status].status}}</span>
          <p [ngStyle]="{'background':cardStatusStore[cardBasicInfo?.status].color}"></p>
        </div>
      </div>
      <div class="big-card big-card-out">
        <div class="big-card-content" [ngStyle]="{'background':dataStore.theme.background}">
          <i class="status-mark" [ngStyle]="{'background':cardStatusStore[cardBasicInfo?.status].color}">
            {{cardStatusStore[cardBasicInfo?.status].status}}
          </i>
          <div class="card-top text-ellipsis">卡号：{{cardBasicInfo?.cardNo }}</div>
          <div class="card-content">
            <div class="left seed-flexbox seed-flexbox-content-between">
              <h2 class="text-ellipsis">{{cardBasicInfo?.name }}</h2>
              <span *ngIf="cardBasicInfo.count||cardBasicInfo.count===0">{{cardBasicInfo.count}}</span>
            </div>
            <div class="right seed-flexbox seed-flexbox-align-center seed-flexbox-content-between">
              <p>有效期：{{cardBasicInfo?.startDateTime |amDateFormat:'YYYY-MM-DD' }} 至
                {{cardBasicInfo?.endDateTime |amDateFormat:'YYYY-MM-DD'}}</p>
              <p  *ngIf="cardBasicInfo.count||cardBasicInfo.count===0">{{cardBasicInfo.goodsUnit}}</p>
            </div>
          </div>
          <div class="card-bottom seed-flexbox seed-flexbox-align-center">
            <p class="order-link" [routerLink]="['/order/detail',cardBasicInfo?.orderNo]">查看订单</p>
            <p class="goods-link" [routerLink]="['/goods/p',cardBasicInfo?.ticketDetailVO.code]">查看商品</p>
          </div>
        </div>
      </div>
    </div>

    <div class="ticket-info-center"  *ngIf="cardBasicInfo.status == 2 || cardBasicInfo.status == 3" >  <!--2为已使用，3完成-->
      <h2 class="ticket-info-title">详情</h2>
      <div class="ticket-service-info" >
        <div class="ticket-service-time">
          <span>时间：{{cardBasicInfo.ticketDetailVO.startDateTime |date:'yyyy-MM-dd HH:mm'}}</span>
          <span *ngIf="cardBasicInfo.ticketDetailVO.endDateTime"> ~ </span>
          <span *ngIf="cardBasicInfo.ticketDetailVO.endDateTime">{{cardBasicInfo.ticketDetailVO.endDateTime |date:'yyyy-MM-dd HH:mm'}}</span>
        </div>
        <div class="ticket-service-area">
          <span>地点：{{cardBasicInfo.ticketDetailVO.address[1]}} &nbsp;{{cardBasicInfo.ticketDetailVO.address[2]}}</span>
        </div>
        <div class="ticket-service-type">
          <span>取票：<span *ngIf="cardBasicInfo.obtainType">{{cardBasicInfo.obtainType}}</span>
          </span>
        </div>
        <div class="ticket-service-endTime" *ngIf="cardBasicInfo.status == 2">
          <span>有效期截止时间：{{cardBasicInfo.endDateTime |date:'yyyy-MM-dd HH:mm'}}</span>
        </div>
        <div class="ticket-service-end" *ngIf="cardBasicInfo.status == 2">
          <span>请您在有效期结束之前使用</span>
        </div>
        <div class="ticket-service-end" *ngIf="cardBasicInfo.status == 3">
          <span>您的门票已于{{cardBasicInfo.endDateTime |date:'yyyy-MM-dd HH:mm'}}使用完毕！</span>
        </div>
      </div>
    </div>

    <div class="ticket-status-one" *ngIf="cardBasicInfo.status == 1">
        <div class="ticket-status-img">
          <img src="../../../../assets/icon/spell_failure_big.png">
        </div>
        <button class="ticket-pay" (click)="goToPay()">请去支付，激活此卡</button>
    </div>

    <div class="gray"></div>
    <div class="detail-foot">
      <button class="wanshan" (click)="goToCheckInfo()">取票人信息</button>
      <button class="wanshan" *ngIf="cardBasicInfo.showExpress == true" (click)="checkTicketLogistics()">查看物流</button>
    </div>
  </div>


</seed-content>
